<!--
 * @Description: 修改密码步骤条2
 * @Date:
 * @LastEditTime:
 * @FilePath:
-->
<template>
  <div class="step1">
    <el-form label-position="right" label-width="100px" ref="formRef" :model="formData" :rules="rules" style="text-align: center">
      <el-form-item label="当前用户:" prop="userName"> <el-input v-model="formData.userName" /> </el-form-item>
      <el-form-item label="新密码:" prop="newPassword">
        <el-input v-model="formData.newPassword" show-password type="password" />
        <div class="intensity">
          <span class="psdText">密码强度</span>
          <span class="line" :class="[level.includes('low') ? 'low' : '']"></span>
          <span class="line" :class="[level.includes('middle') ? 'middle' : '']"></span>
          <span class="line" :class="[level.includes('high') ? 'high' : '']"></span>
        </div>
      </el-form-item>
      <el-form-item label="确认新密码:" prop="affirmNewPassword">
        <el-input v-model="formData.affirmNewPassword" show-password type="password" />
      </el-form-item>
      <el-button type="primary" @click="prev">上一步</el-button
      ><el-button type="primary" @click="next" :loading="loading">提交</el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
import useCurrentInstance from "@/utils/useCurrentInstance";

import md5 from "js-md5";
interface IFormState {
  userName: string;
  newPassword: string;
  affirmNewPassword: string;
}
const emit = defineEmits(["next", "prev"]);
const { proxy } = useCurrentInstance();
const loading = ref(false);
const formRef = ref<FormInstance>();
// 校验密码函数
const checkPassword = (rule: any, value: any, callback: any) => {
  level.value = [];
  if (!value) {
    return callback("密码不能为空");
  }
  // 校验是数字
  const regex1 = /^\d+$/;
  // 校验字母
  const regex2 = /^[A-Za-z]+$/;
  // 校验符号
  const regex3 = /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
  // 校验不能连续三个排列的数字出现
  const regex4 = /^(?!(?:012|123|234|345|456|567|678|789))\d+$/;
  if (regex4.test(value)) {
    return callback("密码不符合规范");
  } else if (regex1.test(value)) {
    level.value.push("low");
  } else if (regex2.test(value)) {
    level.value.push("low");
  } else if (regex3.test(value)) {
    level.value.push("low");
  } else if (/^[A-Za-z\d]+$/.test(value)) {
    level.value.push("low");
    level.value.push("middle");
  } else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(value)) {
    level.value.push("low");
    level.value.push("middle");
  } else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(value)) {
    level.value.push("low");
    level.value.push("middle");
  } else if (
    /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(value)
  ) {
    level.value.push("low");
    level.value.push("middle");
    level.value.push("high");
  }
  if (level.value.length < 2) {
    return callback("密码强度太低，无法使用");
  }
  return callback();
};
// 确认密码
const checkConfirmPassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback("请输入确认密码");
  }
  if (value != formData.newPassword) {
    return callback("两次密码输入不一致，请重新输入");
  }
  return callback();
};
// 表单规则
const rules = reactive<FormRules>({
  userName: [{ required: true, message: "请填写当前用户", trigger: "blur" }],
  newPassword: [{ required: true, validator: checkPassword, trigger: "change" }],
  affirmNewPassword: [{ required: true, validator: checkConfirmPassword, trigger: "blur" }]
});
const level = ref<string[]>([]); //密码强度数组
const userStore = useUserStore();
const username = computed(() => userStore.userInfo.U_Name); //用户名
// 表单绑定字段
const formData = reactive<IFormState>({
  userName: username.value,
  newPassword: "",
  affirmNewPassword: ""
});
// 下一步
const next = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      proxy.$vueAxios
        .post(
          "MasterBaseUsers/ChangePassword",
          {
            u_Name: formData.userName,
            newPassword: md5(formData.newPassword)
          },
          { noLoading: true }
        )
        .then((res: any) => {
          if (res.Mark) {
            loading.value = true;
            emit("next");
          } else {
            proxy.$message.warning(res.Msg);
          }
        });
    }
  });
};
// 上一步
const prev = () => {
  emit("prev");
};
</script>

<style lang="scss" scoped>
.intensity {
  .psdText {
    font-size: 14px;
    margin-right: 10px;
  }
  .line {
    display: inline-block;
    width: 48px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 3px;
    margin-right: 8px;
    &.low {
      background: #f4664a;
    }
    &.middle {
      background: #ffb700;
    }
    &.high {
      background: #2cbb79;
    }
  }
  .level {
    margin: 0 16px 0 8px;
  }
  .warningtext {
    color: #5a5a5a;
    font-size: 12px;
    margin-top: 5px;
  }
}
</style>
